<template>
	<div class="home">
		<div class="clearfix container">
			<div class="home-left">
				<div class="box">
					<div class="title">
						<i class="el-icon-warning"></i>
						<span>常见问题</span>
						<a class="float-r">更多帮助></a>
					</div>
					<div class="content">
						<div v-for="(item,index) in homejson.questionList" key='index'>
							<a class="blue">{{item.name}}</a>
						</div>
						<div class="more">
							<a class="text-center ">问题没解决？提交工单</a>
						</div>
					</div>
				</div>
				<div class="box mt10">
					<div class="title">
						<i class="icon iconfont icon-time"></i>
						<span>最近登录</span>
					</div>
					<div class="content">
						<p>登录时间：<span>2019-04-04 09:10:10</span></p>
						<p>登录IP：<span>192.168.0.1</span></p>
						<p class="text-center">(中国 福建)</p>
						<p class="text-center">
							<a class="blue">查看更多</a>
						</p>
					</div>
				</div>
				<div class="box mt10">
					<div class="title">
						<i class="icon iconfont icon-mail"></i>
						<span>投诉邮箱</span>
					</div>
					<div class="content">
						<p>邮箱地址：<span class="blue">yjb@qq.com</span></p>
					</div>
				</div>
			</div>
			<div class="home-right">
				<div class="top">
					<div class="box top-box-left inline">
						<div class="title">
							<i class="icon iconfont icon-daiban"></i>
							<span>待办事项</span>
						</div>
						<div class="content">
							<div class="operatioin mt10 lett">
								<div class="oper-title f14 fb ">订单</div>
								<div class="oper-box">
									<ul class="oper-ul lett">
										<li>
											<span>生产发货异常</span>
											<a class="f18 fb">12</a>
										</li>
										<li>
											<span>生产发货异常</span>
											<a class="f18 fb">12</a>
										</li>
										<li>
											<span>生产发货异常</span>
											<a class="f18 fb">12</a>
										</li>
									</ul>
								</div>
							</div>
						
							<div class="operatioin mt10 lett">
								<div class="oper-title f14 fb ">订单</div>
								<div class="oper-box">
									<ul class="oper-ul lett">
										<li>
											<span>生产发货异常</span>
											<a class="f18 fb">12</a>
										</li>
										<li>
											<span>生产发货异常</span>
											<a class="f18 fb">12</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<div class="box top-box-right inline">
						<div class="title">
							<i class="icon iconfont icon-caozuo"></i>
							<span>常用操作</span>
						</div>
						<div class="content lett" style="min-height: 127px;">
							<div class="ser">
								<ul class="lett">
									<li class="ser-li text-center">
										<div class="blue">平台授权</div>
									</li>
									<li class="ser-li text-center">
										<div class="blue">平台授权</div>
									</li>
									<li class="ser-li text-center">
										<div class="blue">平台授权</div>
									</li>
									<li class="ser-li text-center">
										<div class="blue">平台授权</div>
									</li>
									<li class="ser-li text-center">
										<div class="blue">平台授权</div>
									</li>
									<li class="ser-li text-center">
										<div class="blue">平台授权</div>
									</li>
									<li class="ser-li text-center">
										<div class="blue">平台授权</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="box mt10">
					<div class="title">
						<i class="icon iconfont icon-shuju"></i>
						<span>数据统计</span>
					</div>
					<div class="content lett mt20 mb10">
						<div class="stati">
							<div class="stati-box">
								<p class="f14">今日营业额</p>
								<p class="line-15">
									<a class="f20 fb">
										<span>￥</span>
										<span>200</span>
									</a>
								</p>
								<p class="line-15">
									<a class="f14">
										<span>订单件数：</span>
										<span>200</span>
									</a>
								</p>
								<p class="line-15">
									<a class="f14">
										<span>订单件数：</span>
										<span>200</span>
									</a>
								</p>
							</div>
						</div>
						<div class="stati">
							<div class="stati-box">
								<p class="f14">今日营业额</p>
								<p class="line-15">
									<a class="f20 fb">
										<span>￥</span>
										<span>200</span>
									</a>
								</p>
								<p class="line-15">
									<a class="f14">
										<span>订单件数：</span>
										<span>200</span>
									</a>
								</p>
								<p class="line-15">
									<a class="f14">
										<span>订单件数：</span>
										<span>200</span>
									</a>
								</p>
							</div>
						</div>
						<div class="stati">
							<div class="stati-box">
								<p class="f14">今日营业额</p>
								<p class="line-15">
									<a class="f20 fb">
										<span>￥</span>
										<span>200</span>
									</a>
								</p>
								<p class="line-15">
									<a class="f14">
										<span>订单件数：</span>
										<span>200</span>
									</a>
								</p>
								<p class="line-15">
									<a class="f14">
										<span>订单件数：</span>
										<span>200</span>
									</a>
								</p>
							</div>
						</div>
						<div class="stati">
							<div class="stati-box">
								<p class="f14">今日营业额</p>
								<p class="line-15">
									<a class="f20 fb">
										<span>￥</span>
										<span>200</span>
									</a>
								</p>
								<p class="line-15">
									<a class="f14">
										<span>订单件数：</span>
										<span>200</span>
									</a>
								</p>
								<p class="line-15">
									<a class="f14">
										<span>订单件数：</span>
										<span>200</span>
									</a>
								</p>
							</div>
						</div>
					</div>
				</div>
				<div class="mt10">
					<el-tabs type="border-card">
					  	<el-tab-pane label="网站公告">
					  		<div class="msg-box">
					  			<ul class="msg-ul">
					  				<li class="msg-li">
					  					<a class="lett">
					  						<div class="title blue">
					  							<div class="con">新品发布：新版上线————衬衫</div>
					  						</div>
					  						<div class="time">2019-05-05 13:10:10</div>
					  					</a>
					  				</li>
					  				<li class="msg-li">
					  					<a class="lett">
					  						<div class="title blue">
					  							<div class="con">新品发布：新版上线————衬衫</div>
					  						</div>
					  						<div class="time">2019-05-05 13:10:10</div>
					  					</a>
					  				</li>
					  				<li class="msg-li">
					  					<a class="lett">
					  						<div class="title red">
					  							<div class="con">新品发布：新版上线————衬衫</div>
					  						</div>
					  						<div class="time">2019-05-05 13:10:10</div>
					  					</a>
					  				</li>
					  				<li class="msg-li">
					  					<a class="lett">
					  						<div class="title blue">
					  							<div class="con">新品发布：新版上线————衬衫</div>
					  						</div>
					  						<div class="time">2019-05-05 13:10:10</div>
					  					</a>
					  				</li>
					  				<li class="msg-li">
					  					<a class="lett">
					  						<div class="title red">
					  							<div class="con">新品发布：新版上线————衬衫</div>
					  						</div>
					  						<div class="time">2019-05-05 13:10:10</div>
					  					</a>
					  				</li>
					  				<li class="msg-li">
					  					<a class="lett">
					  						<div class="title red">
					  							<div class="con">新品发布：新版上线————衬衫</div>
					  						</div>
					  						<div class="time">2019-05-05 13:10:10</div>
					  					</a>
					  				</li>
					  			</ul>
					  		</div>
					  	</el-tab-pane>
					</el-tabs>
				</div>
				
				<div class="mt10">
					<el-tabs type="border-card">
					  	<el-tab-pane label="全部">全部报表</el-tab-pane>
					  	<el-tab-pane label="亚马逊">亚马逊报表</el-tab-pane>
					  	<el-tab-pane label="FBA">FBA报表</el-tab-pane>
					  	<el-tab-pane label="图库统计">图库统计报表</el-tab-pane>
					  	<el-tab-pane label="产品统计">产品统计报表</el-tab-pane>
					</el-tabs>
				</div>
				
			</div>
		</div>
		
	</div>
</template>

<script>
	import datajson from '@/api/mock-data/data-home.js'
	
	export default{
		data(){
			return{
				homejson: {
					questionList: [],
				},
			}
		},
		methods: {
			
		},
		created(){
	    	this.$bus.emit('menuEvent','0')
	    	this.$bus.emit('activeEnvet','')
	    	this.homejson = datajson;
	    },
	}
</script>

<style scoped="scoped" lang="less">
	.home{
		.home-left{
			float: left;
			width: 212px;
			overflow: hidden;
		}
		.home-right{
			float: right;
			width: calc(100% - 222px);
			.top-box-left{
				width: calc(69% - 8px);
				margin-right: 1%;
				letter-spacing: normal;
				vertical-align: top;
			}
			.top-box-right{
				width: 30%;
				letter-spacing: normal;
				vertical-align: top;
			}
			.msg-box{
				padding: 10px;
				.msg-li{
					border-bottom: 1px dashed rgb(225, 227, 229);
					line-height: 37px;
					.title{
					    width: 75%;
					    padding-right: 10%;
					    overflow: hidden;
					    white-space: nowrap;
					    text-overflow: ellipsis;
					    .con{
					        position: relative;
					    	display: inline-block;
					    	max-width: 100%;	
					    }
					    .time{
					    	text-align: right;
				    	    width: 25%;
			    	        font-family: monospace;
					    }
					}
				}
			}
		}
		
		.box{
		    border-style: solid;
		    border-width: 1px;
		    border-color: rgb(221, 221, 221);
		    background-color: rgb(255, 255, 255);
		    .title{
		    	background-color: rgb(245, 247, 250);
			    height: 38px;
			    line-height: 38px;
			    border-bottom: 1px solid rgb(221, 221, 221);
			    padding: 0 8px;
			    color: rgb(89, 90, 90);
			    font-weight: bold;
			    position: relative;
		    }
		    .content{
		    	padding: 8px 10px;
			    color: rgb(89, 90, 90);
			    line-height: 2.3;
			    .more{
			    	padding-top: 5px;
			    	padding-bottom: 5px;
			    	a{
		    		    display: block;
					    background: rgb(245, 247, 250);
					    border: 1px solid rgb(221, 221, 221);
			    	}
			    }
			    .operatioin{
		    	    border-bottom: 1px solid rgb(230, 230, 230);
				    padding: 0 30px 26.5px;
				    .oper-title{
				    	width: 120px;
				    	vertical-align: middle;
				    }
				    .oper-box{
				    	width: calc(100% - 124px);
				    	vertical-align: middle;
				    	.oper-ul{
				    		li{
				    			width: 32.33%;
				    		}
				    		span{
				    			width: 90px;
				    			display: inline-block;
				    		}
				    	}
				    }
				    &:last-child{
			    	    border-bottom: 0;
    					padding: 0 30px 20px;
				    }
			    }
			    .ser{
			    	.ser-li{
			    		line-height: 2.8;
			    		width: 49.4%;
			    		cursor: pointer;
			    	}
			    }
			    .stati{
	    	        text-align: center;
				    display: table-cell;
				    width: 1%;
    				.stati-box{
					    border-style: solid;
					    border-width: 1px;
					    border-color: rgb(226, 227, 229);
					    background-color: rgb(255, 255, 255);
					    box-shadow: 0px 0px 6.3px 0.7px rgba(110, 110, 110, 0.3);
					    display: inline-block;
					    text-align: left;
					    border-radius: 10px;
					    padding: 10px 0px 10px 20px;
					    min-width: 150px;
					    width: 80%;
    				}
			    }
		    }
		}
	}
</style>